<template>
    <div class="storage-detail-container">
        <!-- 页面标题区域 -->
        <div class="page-header">
            <div class="header-content">
                <div class="title-section">
                    <div class="icon-wrapper">
                        <el-icon class="page-icon">
                            <House />
                        </el-icon>
                    </div>
                    <div class="title-text">
                        <h1>{{ warehouseInfo.storageName }}: {{ warehouseInfo.storageCode }}</h1>
                        <p>仓库详细信息管理</p>
                    </div>
                </div>
                <div class="action-buttons">
                    <!-- 编辑按钮已禁用，仓库详情和审计信息不可修改 -->
                    <el-button type="info" plain disabled>
                        <el-icon>
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button type="info" plain @click="handleCopy">
                        <el-icon>
                            <CopyDocument />
                        </el-icon>
                        复制
                    </el-button>
                    <el-button type="danger" plain @click="handleDelete">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                    <el-button type="warning" plain @click="handleDisable">
                        <el-icon>
                            <Lock />
                        </el-icon>
                        停用
                    </el-button>
                    <el-button type="info" plain @click="handleLock">
                        <el-icon>
                            <Lock />
                        </el-icon>
                        锁定
                    </el-button>
                    <el-button type="info" plain @click="handlePrint">
                        <el-icon>
                            <Printer />
                        </el-icon>
                        打印
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 仓库信息卡片 -->
        <div class="warehouse-info-section">
            <div class="info-card">
                <div class="info-header">
                    <h3>仓库详情</h3>
                </div>
                <div class="info-content">
                    <div class="info-grid">
                        <!-- 仓库详情部分 - 不可修改 -->
                        <div class="info-item not-editable">
                            <label>提交人:</label>
                            <span>{{ warehouseInfo.submitter }}</span>
                        </div>
                        <div class="info-item not-editable">
                            <label>操作时间:</label>
                            <span>{{ warehouseInfo.operationTime }}</span>
                        </div>
                        <div class="info-item not-editable">
                            <label>更新时间:</label>
                            <span>{{ warehouseInfo.updateTime }}</span>
                        </div>
                        <div class="info-item not-editable">
                            <label>仓库编号:</label>
                            <span>{{ warehouseInfo.storageCode }}</span>
                        </div>
                        <div class="info-item not-editable">
                            <label>仓库名称:</label>
                            <span>{{ warehouseInfo.storageName }}</span>
                        </div>
                        <div class="info-item not-editable">
                            <label>仓库容量/m³:</label>
                            <span>{{ warehouseInfo.storageCapacity }}</span>
                        </div>
                        <div class="info-item not-editable">
                            <label>库管部门:</label>
                            <span>{{ warehouseInfo.departmentName }}</span>
                        </div>
                        <div class="info-item not-editable">
                            <label>仓库主管:</label>
                            <span>{{ warehouseInfo.managerName }}</span>
                        </div>
                        <div class="info-item not-editable">
                            <label>联系电话:</label>
                            <span>{{ warehouseInfo.contactPhone }}</span>
                        </div>
                        <div class="info-item full-width not-editable">
                            <label>仓库地址:</label>
                            <span>{{ warehouseInfo.storageAddress }}</span>
                        </div>
                        <div class="info-item full-width not-editable">
                            <label>备注:</label>
                            <span>{{ warehouseInfo.description || '暂无备注' }}</span>
                        </div>
                    </div>

                    <!-- 状态和数量信息 -->
                    <div class="status-section">
                        <div class="status-item">
                            <label>状态</label>
                            <div class="status-value"
                                :class="{ 'enabled': warehouseInfo.storageState, 'disabled': !warehouseInfo.storageState }">
                                {{ warehouseInfo.storageState ? '启用' : '停用' }}
                            </div>
                        </div>
                        <div class="status-item">
                            <label>库位数量</label>
                            <div class="quantity-value">{{ locationCount }}</div>
                        </div>
                    </div>
                </div>

                <!-- 审计信息 -->
                <div class="audit-info">
                    <h4>审计信息</h4>
                    <div class="audit-grid">
                        <!-- 审计信息部分 - 不可修改 -->
                        <div class="audit-item not-editable">
                            <label>创建人:</label>
                            <span>{{ warehouseInfo.creator }}</span>
                        </div>
                        <div class="audit-item not-editable">
                            <label>创建时间:</label>
                            <span>{{ warehouseInfo.createTime }}</span>
                        </div>
                        <div class="audit-item not-editable">
                            <label>更新人:</label>
                            <span>{{ warehouseInfo.updater }}</span>
                        </div>
                        <div class="audit-item not-editable">
                            <label>更新时间:</label>
                            <span>{{ warehouseInfo.updateTime }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 库位信息区域 -->
        <div class="location-info-section">
            <div class="location-card">
                <!-- 标签页 -->
                <el-tabs v-model="activeTab" class="location-tabs">
                    <el-tab-pane label="仓位信息" name="location">
                        <!-- 操作按钮区域 -->
                        <el-button type="primary" @click="openAddLocationDialog" class="add-btn">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            新增库位
                        </el-button>
                        <!-- 库位表格 -->
                        <div class="table-section">
                            <el-table :data="locationTableData" style="width: 100%"
                                @selection-change="handleLocationSelectionChange" border>
                                <el-table-column type="selection" width="55" />
                                <el-table-column prop="index" label="序号" width="80" />
                                <el-table-column prop="locationCode" label="库位编号" width="150" />
                                <el-table-column prop="locationName" label="库位名称" width="150" />
                                <el-table-column prop="locationCapacity" label="库位容量/m³" width="120" />
                                <el-table-column prop="locationManager" label="库位主管" width="120" />
                                <el-table-column prop="sortOrder" label="排序" width="80" />
                                <el-table-column prop="locationStatus" label="库位状态" width="100">
                                    <template #default="scope">
                                        <el-tag :type="scope.row.locationStatus ? 'success' : 'danger'" size="small">
                                            {{ scope.row.locationStatus ? '启用' : '停用' }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remark" label="备注" min-width="120" />
                            </el-table>
                            <!-- 添加库位 -->
                            <el-dialog v-model="dialogTableVisible" title="新增库位" width="800">
                                <el-form ref="ruleFormRefs" style="max-width: 600px" :model="ruleForms"
                                    label-width="auto">
                                    <div class="form-row">
                                        <el-form-item label="库位编号" prop="locationCode">
                                            <el-input v-model="ruleForms.locationCode" readonly placeholder="自动生成"
                                                class="code-input">
                                                <template #append>
                                                    <el-button @click="getLocationCode" :loading="generatingLocation"
                                                        type="primary" class="generate-btn">
                                                        <el-icon>
                                                            <Refresh />
                                                        </el-icon>
                                                        重新生成
                                                    </el-button>
                                                </template>
                                            </el-input>
                                        </el-form-item>
                                    </div>

                                    <div class="form-row">
                                        <el-form-item label="库位名称" prop="locationName">
                                            <el-input v-model="ruleForms.locationName" />
                                        </el-form-item>
                                    </div>

                                    <div class="form-row">
                                        <el-form-item label="库位类型" prop="lTypeId">
                                            <el-select v-model="ruleForms.lTypeId" placeholder="请选择库位类型">
                                                <el-option v-for="a in LType" :key="a.lTypeId" :label="a.lTypeName"
                                                    :value="a.lTypeId" />
                                            </el-select>
                                        </el-form-item>
                                    </div>

                                    <div class="form-row">
                                        <el-form-item label="仓库" prop="depotId">
                                            <el-select v-model="ruleForms.depotId" placeholder="请选择仓库">
                                                <el-option v-for="a in Depot" :key="a.depotId" :label="a.depotName"
                                                    :value="a.depotId" />
                                            </el-select>
                                        </el-form-item>
                                    </div>

                                    <div class="form-row">
                                        <el-form-item label="是否禁用" prop="isState">
                                            <!-- <el-input v-model="ruleForms.isState" /> -->
                                            <el-radio-group v-model="ruleForms.isState">
                                                <el-radio :label="true" size="true">启用</el-radio>
                                                <el-radio :label="false" size="false">禁用</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </div>

                                    <div class="form-row">
                                        <el-form-item label="是否默认" prop="isPreset">
                                            <!-- <el-input v-model="ruleForms.isPreset" /> -->
                                            <el-radio-group v-model="ruleForms.isPreset">
                                                <el-radio :label="true" size="true">是</el-radio>
                                                <el-radio :label="false" size="false">否</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </div>

                                    <div class="form-row">
                                        <el-form-item label="备注" prop="locationRemark">
                                            <el-input v-model="ruleForms.locationRemark" />
                                        </el-form-item>
                                    </div>

                                    <div class="form-row">
                                        <el-form-item>
                                            <el-button type="primary" @click="submitForms()">
                                                添加库位
                                            </el-button>
                                            <el-button @click="resetForm1()">取消库位</el-button>
                                        </el-form-item>
                                    </div>

                                </el-form>
                            </el-dialog>

                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="操作记录" name="operation">
                        <el-table :data="totalData" style="width: 100%" border>
                                <el-table-column prop="index" type="index" label="序号" width="100" />
                                <el-table-column prop="operationName" label="操作人" width="150" />
                                <el-table-column prop="oTypeName" label="操作类型" width="150" />
                                <el-table-column prop="operationSketch" label="操作内容描述" width="120" />
                                <el-table-column prop="creatTime" label="操作时间" width="120">
                                    <template #default="scoped">
                                        <span class="time-text">
                                            {{ moment(scoped.row.creatTime).format("YYYY-MM-DD")}}
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    House, Edit, CopyDocument, Delete, Lock, Printer,
    Refresh, Search, Download, Check, Close
} from '@element-plus/icons-vue'
import axios from 'axios'
import moment from 'moment'
import { http } from '@/axios/axiosHelpers'

const router = useRouter()
const route = useRoute()

// 当前激活的标签页
const activeTab = ref('location')

// 仓库信息 - 从路由参数中获取数据
const warehouseInfo = reactive({
    storageId: '',
    storageCode: '',
    storageName: '',
    storageCapacity: 0,
    storageAddress: '',
    storageState: true,
    submitter: '',
    operationTime: '',
    updateTime: '',
    departmentName: '',
    managerName: '',
    contactPhone: '',
    description: '',
    creator: '',
    createTime: '',
    updater: ''
})

// 从路由参数加载仓库数据
const loadWarehouseData = () => {
    // 获取路由查询参数
    const {
        storageId,
        storageCode,
        storageName,
        storageCapacity,
        storageAdder,
        department_Name,
        user_Name,
        locationNumder,
        storageState,
        loginUserName,
        creatTime
    } = route.query

    // 填充仓库信息 - 确保所有从Storage传递的值都被正确赋值
    warehouseInfo.storageId = storageId as string || ''
    warehouseInfo.storageCode = storageCode as string || ''
    warehouseInfo.storageName = storageName as string || ''
    warehouseInfo.storageCapacity = storageCapacity ? Number(storageCapacity) : 0
    warehouseInfo.storageAddress = storageAdder as string || ''
    warehouseInfo.departmentName = department_Name as string || ''
    warehouseInfo.managerName = user_Name as string || ''
    warehouseInfo.storageState = storageState === 'true'
    warehouseInfo.submitter = loginUserName as string || ''

    // 处理日期时间格式
    if (creatTime) {
        warehouseInfo.createTime = moment(creatTime as string).format('YYYY-MM-DD HH:mm:ss')
        warehouseInfo.operationTime = warehouseInfo.createTime
        warehouseInfo.updateTime = warehouseInfo.createTime
    } else {
        warehouseInfo.createTime = ''
        warehouseInfo.operationTime = ''
        warehouseInfo.updateTime = ''
    }

    // 对于没有从Storage传递的字段，可以设置默认值或通过API加载
    warehouseInfo.contactPhone = '' // 可以从API加载或留空
    warehouseInfo.description = '' // 可以从API加载或留空
    warehouseInfo.creator = warehouseInfo.submitter // 假设创建人和提交人相同
    warehouseInfo.updater = warehouseInfo.submitter // 假设更新人和提交人相同

    // 可选：根据storageId加载更多详细数据
    // if (warehouseInfo.storageId) {
    //   loadMoreWarehouseDetails(warehouseInfo.storageId)
    // }
}

// 搜索表单
const searchForm = reactive({
    locationName: '',
    locationStatus: '',
    locationManager: ''
})

// 选中的库位
const selectedLocations = ref<any[]>([])

// 库位表格数据
const locationTableData = ref([])

// 计算库位数量
const locationCount = computed(() => locationTableData.value.length)

// 处理库位多选
const handleLocationSelectionChange = (selection: any[]) => {
    selectedLocations.value = selection
    console.log('选中的库位:', selectedLocations.value)
}

// 搜索功能
const handleSearch = () => {
    console.log('搜索条件:', searchForm)
    // 这里实现搜索逻辑
    ElMessage.success('搜索功能待实现')
}

// 重置搜索
const resetSearch = () => {
    Object.assign(searchForm, {
        locationName: '',
        locationStatus: '',
        locationManager: ''
    })
    ElMessage.success('搜索条件已重置')
}

// 导出功能
const handleExport = () => {
    ElMessage.success('导出功能待实现')
}

// 启用选中库位
const handleEnableSelected = () => {
    if (selectedLocations.value.length === 0) {
        ElMessage.warning('请先选择要启用的库位')
        return
    }
    ElMessage.success(`已启用 ${selectedLocations.value.length} 个库位`)
}

// 停用选中库位
const handleDisableSelected = () => {
    if (selectedLocations.value.length === 0) {
        ElMessage.warning('请先选择要停用的库位')
        return
    }
    ElMessage.success(`已停用 ${selectedLocations.value.length} 个库位`)
}

// 编辑功能
const handleEdit = () => {
    ElMessage.success('编辑功能待实现')
}

// 复制功能
const handleCopy = () => {
    ElMessage.success('复制功能待实现')
}

// 删除功能
const handleDelete = () => {
    ElMessageBox.confirm(
        '确定要删除这个仓库吗？删除后无法恢复。',
        '确认删除',
        {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        ElMessage.success('删除功能待实现')
    }).catch(() => {
        ElMessage.info('删除操作已取消')
    })
}

// 停用功能
const handleDisable = () => {
    ElMessageBox.confirm(
        '确定要停用这个仓库吗？',
        '确认停用',
        {
            confirmButtonText: '确定停用',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        warehouseInfo.storageState = false
        ElMessage.success('仓库已停用')
    }).catch(() => {
        ElMessage.info('停用操作已取消')
    })
}

// 锁定功能
const handleLock = () => {
    ElMessage.success('锁定功能待实现')
}

// 打印功能
const handlePrint = () => {
    ElMessage.success('打印功能待实现')
}

// 组件挂载时获取数据
onMounted(() => {
    // 加载从Storage页面传递过来的仓库数据
    loadWarehouseData()
    console.log('仓库详情页面已加载，数据已从路由参数中获取')
    getDepot();
    getLType();
    getOperation();
    // 如果需要根据storageId加载更多详细数据，可以在这里调用API
    if (warehouseInfo.storageId) {
        // 注释：这里可以添加加载更多仓库详情的API调用
        // loadMoreWarehouseDetails(warehouseInfo.storageId)
    }
})

//库位
const selectable = (row: any) => ![1, 2].includes(row.id)
//仓库
const Depot = ref([{
    "depotId": '',
    "depotName": "",
}])
const getDepot = () => {
    console.log(Depot.value);
    http.get("/basicread/api/Depot/GetDepot").then(res => {
        Depot.value = res.data.data
    })
}
//库位类型
const LType = ref([{
    "lTypeId": '',
    "lTypeName": "",
}])
const getLType = () => {
    console.log(Depot.value);
    http.get("/basicread/api/Location/GetLocationType").then(res => {
        LType.value = res.data.data
    })
}
// 选中的库位
// const selectedLocations = ref<any[]>([])

// 处理库位多选
// const handleLocationSelectionChange = (selection: any[]) => {
//     selectedLocations.value = selection
//     console.log('选中的库位:', selectedLocations.value)
//     console.log('选中的库位ID:', selectedLocations.value.map(item => item.locationId))
// }

const dialogTableVisible = ref(false)
const dialogTableVisible1 = ref(false)

const ruleFormRefs = ref()
const ruleForms = reactive({
    "locationId": '',
    "locationCode": "",
    "locationName": "",
    "lTypeId": '',
    "depotId": '',
    "isState": true,
    "isPreset": true,
    "locationRemark": ""
})

const locationOptions = ['Home', 'Company', 'School']



const submitForms = () => {
    http.post("/basicwrite/api/Location/AddLocation", ruleForms).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.msg)
            dialogTableVisible.value = false;
            getData();
        }
        else {
            ElMessage.error(res.data.msg)
        }
    })
}
const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))

const tableData = ref([]);
const getData = () => {
    http.get("/basicread/api/Location/GetLocation").then(res => {
        tableData.value = res.data.data
    })
}
// 重置表单
const resetForm1 = () => {

    ElMessageBox.confirm('确定要重置表单吗？所有已填写的信息将被清空。', '确认重置', {
        confirmButtonText: '确定重置',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {

        // 重置后重新生成库位编号
        Object.assign(ruleForms, {
            "locationCode": "",
            "locationName": "",
            "lTypeId": '',
            "depotId": '',
            "isState": true,
            "isPreset": true,
            "locationRemark": ""
        })

        // 自动生成新的库位编号
        await getLocationCode()

        ElMessage.success('表单已重置，库位编号已重新生成')
    }).catch(() => {
        // 用户取消重置
    })
}
const generatingLocation = ref(false);
//自动生成库位编号
const getLocationCode = async () => {
    generatingLocation.value = true
    try {
        // 获取现有的库位编号列表
        const response = await axios.get("http://localhost:5011/api/Location/GetLocation")
        const existingLocations = response.data.data || []

        // 提取所有库位编号
        const existingCodes = existingLocations.map((location: any) => location.locationCode).filter(Boolean)

        // 生成新的库位编号
        let newCode = ''

        // 查找最大的编号
        const maxCode = existingCodes.reduce((max: string, current: string) => {
            const currentNum = parseInt(current.replace(/\D/g, '')) || 0
            const maxNum = parseInt(max.replace(/\D/g, '')) || 0
            return currentNum > maxNum ? current : max
        }, 'KW001')

        // 从最大编号中提取数字部分
        const maxNumber = parseInt(maxCode.replace(/\D/g, '')) || 0
        let nextNumber = maxNumber + 1

        // 生成新编号，格式：KW + 4位数字
        newCode = `KW${nextNumber.toString().padStart(4, '0')}`

        // 确保编号唯一
        while (existingCodes.includes(newCode)) {
            nextNumber++
            newCode = `KW${nextNumber.toString().padStart(4, '0')}`
        }

        // 更新表单中的库位编号
        ruleForms.locationCode = newCode

        ElMessage.success('库位编号生成成功')
        return newCode
    } catch (error) {
        console.error('生成库位编号失败:', error)
        ElMessage.error('生成库位编号失败')
        // 如果获取失败，使用时间戳生成编号
        const timestamp = Date.now().toString().slice(-6)
        const fallbackCode = `KW${timestamp}`
        ruleForms.locationCode = fallbackCode
        return fallbackCode
    } finally {
        generatingLocation.value = false
    }
}

// 打开新增库位对话框
const openAddLocationDialog = async () => {
    try {
        // 重置库位表单
        Object.assign(ruleForms, {
            "locationCode": "",
            "locationName": "",
            "lTypeId": '',
            "depotId": '',
            "isState": true,
            "isPreset": true,
            "locationRemark": ""
        })

        // 自动生成库位编号
        await getLocationCode()

        // 打开对话框
        dialogTableVisible.value = true

        ElMessage.success('库位编号已自动生成')
    } catch (error) {
        console.error('打开对话框失败:', error)
        ElMessage.error('打开对话框失败')
    }
}

//操作显示
const totalData=ref([]);
const getOperation=()=>{
    http.get("/basicread/api/GetOperation/GetOperation").then(res=>{
        totalData.value=res.data.data
    });
}
</script>

<style scoped>
.storage-detail-container {
    padding: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    position: relative;
}

/* 不可编辑项样式 */
.not-editable {
    pointer-events: none;
    opacity: 0.8;
    background-color: #f5f5f5;
}

.storage-detail-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.page-header {
    padding: 40px 60px 30px;
    position: relative;
    z-index: 1;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.title-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.page-icon {
    font-size: 28px;
    color: white;
}

.title-text h1 {
    margin: 0 0 8px 0;
    color: white;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title-text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 400;
}

.action-buttons {
    display: flex;
    gap: 12px;
}

.action-buttons .el-button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.action-buttons .el-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.warehouse-info-section {
    max-width: 1400px;
    margin: 0 auto 30px;
    padding: 0 60px;
    position: relative;
    z-index: 1;
}

.info-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.info-header {
    padding: 24px 30px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.info-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 20px;
    font-weight: 600;
}

.info-content {
    padding: 30px;
    position: relative;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-item.full-width {
    grid-column: 1 / -1;
}

.info-item label {
    font-weight: 600;
    color: #374151;
    min-width: 100px;
}

.info-item span {
    color: #1f2937;
    flex: 1;
}

.status-section {
    display: flex;
    gap: 60px;
    padding: 24px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.status-item {
    text-align: center;
}

.status-item label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.status-value {
    font-size: 24px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
}

.status-value.enabled {
    background: #dcfce7;
    color: #166534;
}

.status-value.disabled {
    background: #fef2f2;
    color: #dc2626;
}

.quantity-value {
    font-size: 24px;
    font-weight: 700;
    color: #3b82f6;
    padding: 8px 16px;
    background: #eff6ff;
    border-radius: 8px;
}

.audit-info {
    padding: 24px 30px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.audit-info h4 {
    margin: 0 0 16px 0;
    color: #1e293b;
    font-size: 16px;
    font-weight: 600;
}

.audit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.audit-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.audit-item label {
    font-weight: 600;
    color: #374151;
    min-width: 80px;
}

.audit-item span {
    color: #1f2937;
    flex: 1;
}

.location-info-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px 60px;
    position: relative;
    z-index: 1;
}

.location-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.location-tabs {
    padding: 30px;
}

.search-section {
    margin-bottom: 24px;
    padding: 24px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.search-form {
    margin: 0;
}

.action-section {
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
}

.table-section {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.operation-record {
    padding: 40px;
    text-align: center;
    color: #6b7280;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .page-header {
        padding: 30px 40px 20px;
    }

    .warehouse-info-section,
    .location-info-section {
        padding: 0 40px;
    }

    .header-content {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .action-buttons {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .storage-detail-container {
        padding: 0;
    }

    .page-header {
        padding: 20px 20px 15px;
    }

    .title-section {
        flex-direction: column;
        gap: 15px;
    }

    .icon-wrapper {
        width: 50px;
        height: 50px;
    }

    .page-icon {
        font-size: 24px;
    }

    .title-text h1 {
        font-size: 20px;
    }

    .title-text p {
        font-size: 14px;
    }

    .action-buttons {
        width: 100%;
        justify-content: center;
    }

    .warehouse-info-section,
    .location-info-section {
        padding: 0 20px;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .status-section {
        flex-direction: column;
        gap: 20px;
    }

    .audit-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .search-form {
        flex-direction: column;
    }

    .search-form .el-form-item {
        margin-bottom: 12px;
    }

    .action-section {
        flex-wrap: wrap;
    }

    .action-section .el-button {
        flex: 1;
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 15px 15px 10px;
    }

    .warehouse-info-section,
    .location-info-section {
        padding: 0 15px;
    }

    .title-text h1 {
        font-size: 18px;
    }

    .title-text p {
        font-size: 12px;
    }

    .action-buttons {
        gap: 8px;
    }

    .action-buttons .el-button {
        font-size: 12px;
        padding: 8px 12px;
    }
}
</style>
